<template>
	<div>
		<div class="userinfo clear">
			<div class="nav">
				<div class="avatar">
					<img :src="imgUrl" />
				</div>
				<el-upload
					class="avatar-btn"
					:action="action"
					:show-file-list="false"
					:on-success="handleAvatarSuccess"
					:before-upload="beforeAvatarUpload"
					type="text">
					修改头像
				</el-upload>
				<router-link to="/store" class="nav-li">我的收藏</router-link>
				<router-link to="/follow" class="nav-li">我的订阅</router-link>
				<router-link to="/userinfo" class="nav-li">个人信息</router-link>
				<div class="nav-li" @click="logoutFn">退出登录</div>
			</div>
			
			<div class="userinfo-right">
				<transition name="router-fade" mode="out-in">
					<router-view/>
				</transition>
			</div>
		</div>
		
	</div>
</template>

<script>
import { update, logout, action, imgBaseUrl } from '@/api';
import { mapState, mapMutations } from 'vuex'
import avatarPng from '@/assets/img/avatar.png'
export default {
	data() {
		return {
			imgUrl: null,
			avatarPng,
			action,
		}
	},
	computed: {
		...mapState([
			'userInfo',
			'login'
		]),
	},
	methods: {
		...mapMutations([
			'OUT_LOGIN',
		]),
		handleAvatarSuccess(res, file) {
			let para = {
				// /user/userfront/update?uid=12&head_img=head.jpg
				uid: this.userInfo.user_id,
				user_id: this.userInfo.user_id,
				head_img: res.data
			}
			update(para).then( res_update => {
				if(res_update.data){
					this.imgUrl = imgBaseUrl+res.data;
					this.$store.state.userInfo.head_img = res.data;
				}else {
					if(!res_update.tologin){
						this.$message.warning(res_update.msg);
					}else{
						this.$router.push('/');
						this.DIALOG_LOGIN();
					}
				}
			})
		},
		beforeAvatarUpload(file) {
			const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/bmp';
			const isLt2M = file.size / 1024 / 1024 < 2;

			if (!isJPG) {
				this.$message.error('上传封面图片只能是 JPEG/BMP/PNG/GIF 格式!');
			}
			if (!isLt2M) {
				this.$message.error('上传封面图片大小不能超过 2MB!');
			}
			return isJPG && isLt2M;
		},
		setAvatar(){
			if(this.userInfo.head_img != ''){
				this.imgUrl = imgBaseUrl+this.userInfo.head_img;
			}else{
				this.imgUrl = avatarPng;
			}
		},
		logoutFn(){
			this.$confirm('确认退出吗?', '提示', {
				type: 'warning'
			}).then(() => {
				let para = {
					user_id: this.userInfo.user_id
				}
				logout(para).then(res => {
					let {data, msg} = res;
					if(!data){
						this.$message.warning(msg);
					}else {
						// let path = this.$route.path;
						// if(path === '/store' || path === '/follow' || path ==='/userInfo'){
						// 	this.$router.push('/');
						// }
						this.$router.push('/');
						this.OUT_LOGIN();
					}
				});
			}).catch(() => {

			});
		},
	},
	created() {
		this.setAvatar();
	}
}
</script>

<style scoped lang="scss">
.userinfo {
	background: #fff;
	width: 1200px;
	margin: 50px auto 20px auto;
	padding: 80px 0;
	.nav {
		float:left;
		position: relative;
		top: 0;
		left: 0;
		width: 260px;
		border-right: 1px solid #333;
		padding: 100px 50px;
		margin-right: 50px;
		.avatar {
			position: absolute;
			top: -120px;
			left: 45px;
			width: 170px;
			height: 170px;
			border-radius: 50%;
			overflow: hidden;
			border: 1px solid #ccc;
			background: #fff;
			img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
		.avatar-btn {
			position: absolute;
			top: 55px;
			left: 100px;
		}
		
		.nav-li {
			display: block;
			height: 14px;
			line-height: 14px;
			padding: 30px;
			border-bottom: 1px solid #ccc;
			cursor: pointer;
		}
		.nav-li:hover {
			color: #f86254;
		}
		.nav-li.router-link-active{
			color: #f86254;
		}

	}
}
.userinfo-right {
	float: left;
	width: 800px;
}
</style>